<template>
  <div class="revenue-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>广告收益</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">广告收益统计</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="data-page">
      <div class="data-title">
        提示：
        每月23号结算上一个月的收入数据，提交发票缴税后的收入可用于抵扣设备分期以及购买服务市场的应用，敬请期待
      </div>
      <div class="data-device">
        <div class="item">
          <div class="item-left">
            <img src="/src/assets/home/tool1.png" alt />
          </div>
          <div class="item-right">
            <div class="item-right_top">预计总收入</div>
            <div class="item-right_bottom">¥ 800</div>
          </div>
        </div>
        <div class="item">
          <div class="item-left">
            <img src="/src/assets/home/tool2.png" alt />
          </div>
          <div class="item-right">
            <div class="item-right_top">可缴税金额</div>
            <div class="item-right_bottom">¥ 0.00</div>
          </div>
          <div class="item—btn" @click="goTax">去缴税 ></div>
        </div>
        <div class="item">
          <div class="item-left">
            <img src="/src/assets/home/tool3.png" alt />
          </div>
          <div class="item-right">
            <div class="item-right_top">可使用余额</div>
            <div class="item-right_bottom">¥ 0.00</div>
          </div>
          <div class="item—btn" @click="goBuy">去使用 ></div>
        </div>
      </div>
      <div class="data-table">
        <el-tabs
          v-model="activeTab"
          type="card"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="收益明细" name="1">
            <div class="head">
              <div class="choice-list">
                <div class="choice-item">
                  <div class="choice-title">按时间段</div>

                  <el-date-picker
                    v-model="incomeForm.detailTime"
                    type="date"
                    placeholder="请选择"
                    style="width: 160px"
                    :suffix-icon="CaretBottom"
                  />
                </div>
                <div class="choice-item">
                  <div class="choice-title">是否已统计完</div>
                  <el-select
                    v-model="incomeForm.seachDetails"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="i in detailsOptions"
                      :key="i.value"
                      :label="i.label"
                      :value="i.value"
                    />
                  </el-select>
                </div>
                <div class="btn">
                  <el-button round :icon="Search" color="#0071bb"
                    >搜索</el-button
                  >
                </div>
                <div class="btn">
                  <el-button round color="#0071bb">导出详情列表</el-button>
                </div>
              </div>
              <div class="tables">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop="id" label="序号" width="50px" />
                  <el-table-column prop="date" label="日期" />
                  <el-table-column prop="device" label="参数设备数" />
                  <el-table-column prop="revenue" label="已统计收入" />
                  <el-table-column prop="over" label="是否已统计完" />
                </el-table>
              </div>
              <div class="page_number">
                <el-pagination
                  v-model:current-page="currentPage"
                  v-model:page-size="pageSize"
                  :size="size"
                  :disabled="disabled"
                  layout="prev, pager, next, jumper,total"
                  :total="10"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="缴税记录" name="2">
            <div class="head">
              <div class="choice-list">
                <div class="choice-item">
                  <div class="choice-title">按时间段</div>

                  <el-date-picker
                    v-model="taxForm.detailTime"
                    type="date"
                    placeholder="请选择"
                    style="width: 160px"
                    :suffix-icon="CaretBottom"
                  />
                </div>
                <div class="choice-item">
                  <div class="choice-title">状态</div>
                  <el-select
                    v-model="taxForm.payTaxesStatus"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="i in statusOptions"
                      :key="i.value"
                      :label="i.label"
                      :value="i.value"
                    />
                  </el-select>
                </div>
                <div class="choice-item">
                  <div class="choice-title">是否有发票</div>
                  <el-select v-model="taxForm.payTaxes" placeholder="请选择">
                    <el-option
                      v-for="i in payTaxesOptions"
                      :key="i.value"
                      :label="i.label"
                      :value="i.value"
                    />
                  </el-select>
                </div>
                <div class="btn">
                  <el-button round :icon="Search" color="#0071bb"
                    >搜索</el-button
                  >
                </div>
                <div class="btn">
                  <el-button round color="#0071bb">导出详情列表</el-button>
                </div>
              </div>
              <div class="tables">
                <el-table :data="tableData2" style="width: 100%">
                  <el-table-column prop="id" label="序号" width="50px" />
                  <el-table-column prop="date" label="申请日期" />
                  <el-table-column prop="order" label="单号" />
                  <el-table-column prop="money" label="缴税金额" />
                  <el-table-column prop="money" label="手续费" />
                  <el-table-column prop="status" label="状态" />
                  <el-table-column label="操作">
                    <template #default="scope">
                      <div class="table-btn" @click="lookDetail(scope)">
                        查看
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="page_number">
                <el-pagination
                  v-model:current-page="currentPage"
                  v-model:page-size="pageSize"
                  :size="size"
                  :disabled="disabled"
                  layout="prev, pager, next, jumper,total"
                  :total="10"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="月账单明细" name="3">
            <div class="head">
              <div class="choice-list">
                <div class="choice-item">
                  <div class="choice-title">状态</div>
                  <el-select v-model="status" placeholder="请选择">
                    <el-option
                      v-for="i in detailStatusOptions"
                      :key="i.value"
                      :label="i.label"
                      :value="i.value"
                    />
                  </el-select>
                </div>
                <div class="btn">
                  <el-button round :icon="Search" color="#0071bb"
                    >搜索</el-button
                  >
                </div>
              </div>
              <div class="tables">
                <el-table :data="tableData3" style="width: 100%">
                  <el-table-column prop="month" label="月份" />
                  <el-table-column prop="money" label="收益" />
                  <el-table-column prop="status" label="状态" />
                </el-table>
              </div>
              <div class="page_number">
                <el-pagination
                  v-model:current-page="currentPage"
                  v-model:page-size="pageSize"
                  :size="size"
                  :disabled="disabled"
                  layout="prev, pager, next, jumper,total"
                  :total="10"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { TabsPaneContext, ComponentSize } from "element-plus";
import { Search, CaretBottom } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
// 收益明细tab数据
const incomeForm = ref({
  detailTime: "",
  seachDetails: "",
});
const detailsOptions = ref([
  {
    label: "label1",
    value: 1,
  },
]);
// 缴税记录tab数据
const taxForm = ref({
  detailTime: "",
  payTaxesStatus: "",
  payTaxes: "",
});
const statusOptions = ref([
  {
    label: "是",
    value: 1,
  },
  {
    label: "否",
    value: 0,
  },
]);
const payTaxesOptions = ref([
  {
    label: "是否有发票1",
    value: 1,
  },
]);
//月账单明细tab数据
const detailForm = ref({
  status: "",
});
const detailStatusOptions = ref([
  {
    label: "状态1",
    value: 1,
  },
  {
    label: "状态2",
    value: 0,
  },
]);

const activeTab = ref("1");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const tableData = [
  {
    id: "1",
    revenue: "123",
    device: "1",
    date: "2024-05-20",
    over: "是",
  },
  {
    id: "2",
    revenue: "123",
    device: "1",
    date: "2024-05-20",
    over: "是",
  },
  {
    id: "3",
    revenue: "123",
    device: "1",
    date: "2024-05-20",
    over: "是",
  },
  {
    id: "4",
    revenue: "123",
    device: "1",
    date: "2024-05-20",
    over: "是",
  },
];
const tableData2 = [
  {
    id: "1",
    date: "2024-05-20",
    order: "111232442414",
    money: "324.00",
    status: "是",
  },
  {
    id: "2",
    date: "2024-05-20",
    order: "111232442414",
    money: "324.00",
    status: "是",
  },
  {
    id: "3",
    date: "2024-05-20",
    order: "111232442414",
    money: "324.00",
    status: "是",
  },
  {
    id: "4",
    date: "2024-05-20",
    order: "111232442414",
    money: "324.00",
    status: "是",
  },
];
const tableData3 = [
  {
    id: "1",
    month: "2024-05",
    money: "324.00",
    status: "是",
  },
  {
    id: "2",
    month: "2024-05",
    money: "324.00",
    status: "是",
  },
  {
    id: "3",
    month: "2024-05",
    money: "324.00",
    status: "是",
  },
  {
    id: "4",
    month: "2024-05",
    money: "324.00",
    status: "是",
  },
  {
    id: "5",
    month: "2024-05",
    money: "324.00",
    status: "是",
  },
];

const currentPage = ref(1);
const pageSize = ref(1);
const size = ref<ComponentSize>("small");
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const lookDetail = (val: any) => {
  console.log(val);
};
const router = useRouter();
const goTax = () => {
  router.push("/tax_process");
};
const goBuy = () => {
  router.push("/using_balance");
};
</script>
<style scoped lang="scss">
.revenue-page {
  padding: 20px 10px;
  padding-bottom: 0px;
  background-color: #fff;
  background-color: #f0f0f0;
}
.data-page {
  background-color: #fff;
  margin-top: 20px;
  .data-title {
    background: #f0a93e;
    color: #fff;
    font-size: 12px;
    padding: 10px 20px;
  }
  .table {
    height: 40px;
    background-color: #6d6d6d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    color: #fff;
    font-size: 16px;

    .el-button {
      font-size: 12px;
      padding: 0 10px;
      height: 25px;
      line-height: 25px;
      border-radius: 5px;
    }
  }

  .page {
    display: flex;
    justify-content: center;
    background-color: #fff;
    padding: 5px 0;
  }

  .data-device {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item {
      background-image: linear-gradient(to right, #2790cd, #7dccf3);
      width: 33%;
      position: relative;
      display: flex;
      align-items: center;
      padding: 25px 30px;
      border-radius: 15px;

      .item-left {
        img {
          width: 50px;
          height: 50px;
          vertical-align: middle;
        }
      }

      .item-right {
        margin-left: 10px;
        color: #fff;

        .item-right_top {
          font-size: 11px;
          margin-top: 2px;
          margin-bottom: 8px;
        }

        .item-right_bottom {
          font-size: 16px;
          font-weight: 900;
        }
      }
      .item—btn {
        position: absolute;
        right: 30px;
        width: 100px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        background-color: rgb(246, 146, 30);
        border-radius: 15px;
        font-size: 12px;
        color: #fff;
        cursor: pointer;
      }
    }
  }
  .data-table {
    .head {
      background-color: #fff;
      padding: 10px 10px 0px 10px;
      .choice-list {
        display: flex;
        flex-wrap: wrap;

        .choice-item {
          width: 14.2%;
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          .el-select {
            width: 160px;
          }

          .choice-title {
            font-size: 12px;
            width: 120px;
            text-align: center;
          }

          .rounded-input {
            width: 160px;
          }
        }

        .choice-box {
          width: 71%;
          display: flex;
          justify-content: right;

          .choice-btn {
            display: flex;
            justify-content: left;
          }
        }
      }

      .btn {
        margin-left: 10px;
      }
      .table-btn {
        color: #519ed0;
        cursor: pointer;
      }
    }
  }
}
:deep() {
  .el-tabs__header {
    padding-right: 20px !important;
    padding-left: 20px !important;
    height: 30px !important;
  }
  .el-tabs,
  .el-tabs__nav-wrap,
  .el-tabs__nav-scroll,
  .el-tabs__nav {
    height: 30px !important;
    border-radius: 0px !important;
  }
  .el-tabs__item {
    height: 30px !important;
  }
  .is-active {
    background: #0071bb;
    color: #fff;
  }
  th {
    background-color: #6d6d6d !important;
    color: #fff !important;
  }
}
</style>
